import React, {Component} from 'react';
import {render} from 'react-dom';
import {Router,Route,IndexRoute,Link} from 'react-router';

import About from './About';
import Home from './Home';
import Repos from './Repos';
import RepoDetails from './RepoDetails';
import ServerError from './ServerError';

import createBrowserHistory from 'history/lib/createBrowserHistory';

class RouterApp extends Component{

    render(){
        return (
            <div>
                <header>App</header>
                <menu>
                    <ul>
                        <li><Link to="/about" activeClassName="active">About</Link></li>
                        <li><Link to="/repos" activeClassName="active">Repos</Link></li>
                    </ul>   
                </menu>
                {this.props.children}
            </div>
        )
    }

}

render((
    <Router history={createBrowserHistory()}>
        <Route path="/" component={RouterApp}>
            <IndexRoute component={Home}/>
            <Route path="about" component={About} title="About Us"/>
            <Route path="repos" component={Repos}>
                <Route path="/repo/:repo_name" component={RepoDetails}/>
            </Route>
            <Route path="error" component={ServerError}/>
        </Route>
    </Router>
),document.getElementById('root'));